<template>
  <div class="from">
    <el-form :model="loginForm" label-position="top">
      <template v-if="loginTyle == 1">
        <el-form-item :label="t('login.phoneLabel')"
          ><!-- 多语言：手机号 -->
          <el-input
            v-model="loginForm.phone"
            :placeholder="t('login.phonePlaceholder')"
            class="country-selector-container"
            size="large"
          >
            <!-- 多语言：请选择 -->
            <template #prepend>
              <div class="left-content">
                <el-select
                  v-model="loginForm.country"
                  value-key="id"
                  :placeholder="t('login.countryPlaceholder')"
                  style="width: 70px"
                  size="large"
                >
                  <template #prefix>
                    <img
                      :src="loginForm.country.img"
                      class="select-img"
                      alt=""
                    />
                  </template>
                  <el-option
                    v-for="item in countryOptions"
                    :key="item.id"
                    :value="item"
                    label=" "
                  >
                    <div class="option-img">
                      <img :src="item.img" alt="" />
                      <span>{{ item.code }}</span>
                    </div>
                  </el-option>
                </el-select>
                <span class="country-code-text">{{
                  loginForm.country.code
                }}</span>
              </div>
            </template>
          </el-input>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item :label="t('login.emailLabel')"
          ><!-- 多语言：邮箱 -->
          <el-input
            v-model="loginForm.email"
            size="large"
            :placeholder="t('login.emailPlaceholder')"
          >
            <template #prefix>
              <svg-icon name="login-email" class="svg-style"></svg-icon>
            </template>
          </el-input>
        </el-form-item>
      </template>
      <el-form-item :label="t('login.passwordLabel')"
        ><!-- 多语言：密码 -->
        <el-input
          size="large"
          v-model="loginForm.password"
          type="password"
          show-password
          :placeholder="t('login.passwordPlaceholder')"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import img404 from "~/assets/404.png";
import loginImg from "~/assets/login.png";
defineProps({
  loginTyle: {
    type: Number,
    default: 1,
  },
});
const { t } = useI18n(); // 多语言：获取 t 方法
// 1.手机号登录   2邮箱登录
// 国家区号选项
const countryOptions = ref([
  { code: "+1", flag: "🇺🇸", img: img404, id: 1 },
  { code: "+86", flag: "🇨🇳", img: loginImg, id: 2 },
  // 你可以在这里添加更多国家
]);

// 登录表单
const loginForm = reactive({
  phone: "",
  password: "",
  // 默认选中第一个国家
  country: countryOptions.value[0],
  email: "",
});

defineExpose({
  loginForm,
});
</script>

<style lang="less" scoped>
.from {
  margin-top: 24px;

  .country-selector-container {
    width: 100%;

    .left-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .country-code-text {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
      }

      .select-img {
        width: 36px;
        height: 22px;
        margin-left: -10px;
        border: 1px solid red;
      }
    }
  }

  :deep(.el-select) {
    margin: 0;
  }

  // 调整prepend插槽的内边距，使整体布局更紧凑
  :deep(.el-input-group__prepend) {
    width: 120px;
    padding: 0 !important;
  }
}

.option-img {
  display: flex;
  align-items: center;
  gap: 8px;

  img {
    width: 36px;
    height: 22px;
    border: 1px solid red;
  }

  span {
    flex: 1;
  }
}
</style>
